<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/videoWeb/layui-v2.5.7/layui/css/layui.css">
    <link rel="stylesheet" href="/videoWeb/element/element.css">
    <script src="/videoWeb/js/Jquery.js" ></script>
    <script src="/videoWeb/layui-v2.5.7/layui/layui.js"></script>
    <script src="/videoWeb/js/vue.js"></script>
    <script src="/videoWeb/element/element.js"></script>
    <script src="/videoWeb/js/echarts.js"></script>
    <script src="/videoWeb/js/axios.js" ></script>
    <title>个人中心-我的视频</title>
</head>

<style>

    #head{
        position: fixed;
        width:100%;
        top:0;
        z-index:100;
    }

    #app_div1{
        width: 70%;
        border: 1px solid rgb(225,226,229);
        margin: auto;
        margin-top: 15vh;
        display: flex;
    }

    #app_div1_div1{
        width: 100%;
        height:50vh;
        /*border: 1px red solid;*/
        padding-top: 20px;
        padding-bottom: 80px;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }

    .login_tity{
        display: flex;
        width: 100%;
        height: 21vh;
        /* border: solid 1px black; */
        justify-content: center;
        align-items: center;
        font-size: 13px;
        color: #666666;
    }

    .links{
        /* border: solid 1px black; */
    }

    .links>a{
        text-decoration: none;
        margin: 10px;
        color: #666666;
    }

    .copyright{
        text-align: center;
        margin-top: 10px;
    }

</style>
<body>
<div id="app">
    <el-menu :default-active="activeIndex" class="el-menu-demo" id="head" mode="horizontal" @select="handleSelect">
        <el-menu-item index="1">
            <el-image style="width: 100px; height: 50px" :src="url" :fit="fit"></el-image>
        </el-menu-item>
        <el-menu-item index="1"><a href="/videoWeb/fronts/index.html"><i class="el-icon-s-home"></i>主页</a></el-menu-item>
        <el-menu-item index="2">实战课</el-menu-item>
        <el-menu-item index="3">体系课</el-menu-item>
        <el-menu-item index="4"><a href="" target="_blank">手记</a></el-menu-item>
        <el-menu-item >
            <el-input placeholder="请输入关键字" v-model="input" clearable style="width:250px"></el-input>
            <el-button size="medium" icon="el-icon-search"></el-button>
        </el-menu-item>

        <el-menu-item style="float: right;" v-if="code != 100">
            <a href="">注册</a>
            /
            <a href="login.html">登录</a>
        </el-menu-item>

        <el-submenu index="5" style="float: right;" v-if="code === 100">
            <template slot="title">
                <div class="demo-type" style="display:inline-block">
                    <div>
                        <el-avatar :src="imgSrc"></el-avatar>
                    </div>
                </div>
            </template>
            <el-menu-item index="5-1" style="color:black;font-weight:700;text-align:center;">{{name}}</el-menu-item>
            <el-menu-item index="5-2">
                <a href="/videoWeb/fronts/myHead.html">
                    <i class="el-icon-user"></i>
                    个人中心
                </a>
            </el-menu-item>
            <el-menu-item index="5-3" @click="loginOut"><i class="el-icon-switch-button"></i>退出</el-menu-item>
        </el-submenu>

        <el-menu-item style="float: right;"><a href="/videoWeb/fronts/home.html">创作中心</a></el-menu-item>

    </el-menu>

    <div id="app_div1">
        <el-row class="tac" style="width:15%; background-color: rgb(48,65,86);">
            <el-col>
                <el-menu default-active="4"
                         class="el-menu-vertical-demo"
                         @open="handleOpen"
                         @close="handleClose"
                         style="height:100%; overflow-x:hidden;"
                         unique-opened
                         background-color="rgb(48,64,86)"
                         text-color="#fff"
                         active-text-color="#409EFF"
                >
                    <a href="/videoWeb/fronts/index.html">
                        <el-menu-item  index="1">
                            <i class="el-icon-house"></i>
                            主页
                        </el-menu-item >
                    </a>
                    <a href="/videoWeb/fronts/myHead.html">
                        <el-menu-item index="2">
                            <span slot="title">
                               <i class="el-icon-s-custom"></i>
                               我的头像
                            </span>
                        </el-menu-item>
                    </a>
                    <a href="/videoWeb/fronts/myVideoStatisticsCount.html">
                        <el-menu-item index="3">
                            <i class="el-icon-s-data"></i>
                            视频统计
                        </el-menu-item>
                    </a>
                    <a href="/videoWeb/fronts/myVideo.html">
                        <el-menu-item index="4">
                            <i class="el-icon-video-camera-solid"></i>
                            我的视频
                        </el-menu-item>
                    </a>
                </el-menu>
            </el-col>
        </el-row>

        <div id="app_div1_div1">
            <template>
                <el-table
                        :data="oneselfVideoList"
                        border
                        style="width: 100%">
                    <el-table-column
                            prop="videoTitle"
                            label="标题"
                            align="center"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="姓名"
                            align="center"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="province"
                            label="省份"
                            align="center"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="city"
                            label="市区"
                            align="center"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="地址"
                            align="center"
                            >
                    </el-table-column>
                    <el-table-column
                            prop="zip"
                            label="邮编"
                            align="center"
                            >
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            align="center"
                            >
                        <template slot-scope="scope">
                            <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                            <el-button type="text" size="small">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
            <div class="block">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page.sync="pageNo"
                        :page-size="pageSize"
                        layout="prev, pager, next, jumper"
                        :total="pagesTotalCount">
                </el-pagination>
            </div>
        </div>

    </div>

    <div class="login_tity">
        <div class="links">
            <a href="">
                关于我们
            </a>
            |
            <a href="">
                联系我们
            </a>
            |
            <a href="">
                人才招聘
            </a>
            |
            <a href="">
                商家入驻
            </a>
            |
            <a href="">
                广告服务
            </a>
            |
            <a href="">
                手机蛇皮
            </a>
            |
            <a href="">
                友情链接
            </a>
            |
            <a href="">
                销售联盟
            </a>
            |
            <a href="">
                蛇皮社区
            </a>
            |
            <a href="">
                蛇皮公益
            </a>
            |
            <a href="">English Site</a>
            <div class="copyright">
                Copyright&nbsp;©&nbsp;2004-2021&nbsp;&nbsp;蛇皮SP.com&nbsp;版权所有
            </div>
        </div>

    </div>

</div>
</body>

<script>

    layui.use('layer',function(){
        var layer = layui.layer;
    })

    new Vue({
        el:'#app',
        data(){
            return {
                urls:['https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
                    ,'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'],
                url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                code:1,//登录状态
                name:"",//用户姓名
                imgSrc:"",//用户头像
                id:0,//用户id
                headImg:'',//上传文件图片
                oneselfVideoList:[],//自己视频列表
                //分页参数
                pageNo:1,//当前页码
                pageSize:10,//每页个数
                pageTotal:0,//页码数
                pagesTotalCount:0,//总条数
            }
        },
        mounted:function (){
            this.login();
        },
        methods:{
            isCollapse: true,
            login:function(){
                var that = this;
                $.ajax({
                    url:"/videoWeb/getUserMessageOfLogin",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:(res)=>{
                        if(res.code == 100){
                            that.code = res.code;
                            that.name = res.data.username;
                            that.imgSrc = res.data.headImg;
                            that.id = res.data.id;
                            that.headImg = res.data.headImg;
                            this.getOneselfVideoList();
                        }
                        if(res.code == 401){
                            location.href="../../../../login";
                        }
                    }
                })
            },
            loginOut:function(){
                $.ajax({
                    url:"/videoWeb/loginOut",
                    headers:{
                        Authorization:localStorage.Authorization,
                    },
                    success:function(res){
                        location.href="../../../../login";
                    }
                })
            },
            getOneselfVideoList:function()
            {
                var userId = this.id;
                var that = this;
                axios.get("/videoWeb/getOneselfVideoList",
                    {
                        headers:
                        {
                            Authorization:localStorage.Authorization,
                        },
                        params:
                        {
                            userId:userId,
                            pageNo:this.pageNo,
                            pageSize:this.pageSize,
                        },
                    }).then(
                    function(res)
                    {
                        that.oneselfVideoList = res.data.rows;
                    },
                    function(error)
                    {

                    }
                );
            },
        },
    })

</script>

</html>
